<template>
	<view>
		<!-- 公共组件-每个页面必须引入 -->
		<public-module></public-module>
		<view class="main" v-if="likeUserData.length > 0">
			<view class="item" v-for="(item,index) in likeUserData" :key="index">
				<view class="item-img">
					<image  :src="item.avatar" mode="heightFix"></image>
				</view>
				<view class="item-tit">
					<view class="item-tit-name">
						{{ item.name || '' }}
					</view>
					<view class="item-tit-icon">
						<image :src="imgUrl + 'static/web/icon/icon_renzheng.png'" mode=""></image>
					</view>
				</view>
				<view class="item-info" v-if="item.is_auth != '0'">
					{{ item.age || '' }}岁·{{ item.height || '' }}cm·{{ item.city || '' }}
				</view>
			</view>
			
		</view>
		<view class="" style="margin-top: 200rpx;" v-else>
			<u-empty
			        mode="data"
			        icon="http://cdn.uviewui.com/uview/empty/data.png"
					text=" "
			>
			</u-empty>
		</view>
	</view>
</template>

<script>
	import { mapState, mapMutations } from 'vuex';
	export default {
		data() {
			return {
				imgUrl: this.$http.baseUrl, // 服务器域名
				uid: '', //用户id
				likeUserData: [], // 存储收藏的用户信息
				limit: 10, // 每页的请求条件
				page: 1, // 页码
				total: 0, // 数据总数量
			}
		},
		computed: {
			...mapState(['userInfo']),
		},
		methods: {
			// 获取我收藏的用户
			getlikeUserData(){
				var that = this
				if(!that.uid){
					uni.showToast({
					    title: '请前往授权登录',
						icon: 'none',
					    duration: 1000
					});
					setTimeout(function() {
						uni.switchTab({
							url: '/pages/my/my'
						});
					}, 1000);
				}else{
					that.$http.get('api/ZhCollection/getLikeMe',{'page':that.page,'limit':that.limit}).then(res=> {
						if(res){
							that.likeUserData = [...that.likeUserData,...res.data]
							that.total = res.total
						}
					})
				}
			},
		},
		onShow() {
			var userInfo = this.$store.state.userInfo;
			this.uid = userInfo.uid;
			this.likeUserData = []
			this.page = 1
			this.total = 0
			this.getlikeUserData()
		},
		// 触底触发
		onReachBottom() {
			if(this.likeUserData.length < this.total){
				this.page++
				this.getlikeUserData()
			}
		},
	}
</script>

<style lang="scss" scoped>
.main {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	width: 100%;
	padding: 30rpx 30rpx 0;
	.item {
		width: 330rpx;
		background: #FFFFFF;
		border-radius: 24rpx;
		padding: 24rpx;
		margin-bottom: 30rpx;
		.item-img {
			width: 282rpx;
			height: 293rpx;
			border-radius: 24rpx;
			overflow: hidden;
			image {
				width: 100%;
				height: 100%;
			}
		}
		.item-tit {
			display: flex;
			align-items: center;
			font-size: 32rpx;
			font-weight: 600;
			color: #000013;
			line-height: 45rpx;
			margin-top: 18rpx;
			.item-tit-icon {
				width: 28rpx;
				height: 32rpx;
				margin-left: 10rpx;
				image {
					width: 100%;
					height: 100%;
				}
			}
		}
		.item-info {
			font-size: 26rpx;
			font-weight: 500;
			color: #BEC6D3;
			line-height: 37rpx;
			margin-top: 18rpx;
		}
	}
}

</style>
